<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博舆情分析系统-首页</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
    <style>
        body {
            animation: blink 2s infinite alternate;
        }

        @keyframes blink {
            0% {
                background-color: pink;
            }

            100% {
                background-color: skyblue;
            }
        }

        .titlename {
            position: relative;
            right: 1%;
            text-decoration: overline;
            text-align: center;
            font-size: 20px;
            color: black;
        }

        .content {
            width: 90%;
            max-width: 90%;
            height: 100%;
            background-color: #ffffff;
            box-sizing: border-box;
            border-radius: 5px;
            margin-left: 5%;
            margin-top: 20px;
        }

        .guidebar {
            display: flex;
            justify-content: space-evenly;
            width: 100%;
            max-width: 100%;
            height: 60px;
            background-color: rgb(221, 196, 240);
            box-sizing: border-box;
            border-radius: 5px;
        }

        .time {
            position: relative;
            display: flex;
            justify-content: flex-start;
            flex-direction: row;
            width: 100%;
            max-width: 100%;
            height: 50px;
            background-color: rgba(196, 240, 214, 0.863);
            box-sizing: border-box;
            border-radius: 5px;
        }

        .button0 {
            margin: 10px 5px 0 5px;
            width: 120px;
            height: 30px;
            border-radius: 5px;
            font-size: 10px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            background: none;
            color: #6e6e6e;
            border-style: none;
            box-shadow: 0 0 8px rgba(102, 102, 102, 0.5);
        }

        h6 {
            margin: 15px 10px 10px 125px;
            font-size: 15px;
            color: #6e6e6e;
        }

        .button {
            margin-top: 5px;
            width: 150px;
            height: 50px;
            border-radius: 5px;
            font-size: 10px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            background: none;
            color: #6e6e6e;
            border-style: none;
            box-shadow: 0 0 8px rgba(102, 102, 102, 0.5);
        }

        .homecontent {
            margin-top: 30px;
        }

        .display {
            position: relative;
            width: 90%;
            max-width: 90%;
            height: 500px;
            background-color: #ffffff;
            box-sizing: border-box;
            border-radius: 5px;
            margin-left: 5%;
            margin-top: 40px;
            bottom: 10px;
            color: #ffffff;
            border-style: none;
            box-shadow: 0 0 8px rgba(102, 102, 102, 0.5);
            padding-left: 2%;
            padding-top: 15px;
            overflow: hidden;
        }

        .displayf {
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: 90%;
            max-width: 90%;
            height: 510px;
            background-color: #ffffff;
            box-sizing: border-box;
            border-radius: 5px;
            margin-left: 5%;
            margin-top: 40px;
            bottom: 10px;
            color: #ffffff;
            border-style: none;
            overflow: hidden;
        }

        .halfdisplay {
            display: inline-block;
            width: 45%;
            max-width: 45%;
            height: 500px;
            margin-top: 5px;
            background-color: #ffffff;
            box-sizing: border-box;
            border-radius: 5px;
            color: #ffffff;
            border-style: none;
            box-shadow: 0 0 8px rgba(102, 102, 102, 0.5);
            padding-top: 15px;
        }

        .image-container {
            width: 90%;
            height: 90%;
            margin-left: 4%;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .topic-list {
            list-style: none;
            padding: 0;
            margin: 0;
            color: #333;
            font-size: 14px;
        }

        .topic-list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #eee;
            color: black;
        }

        .topic-list li .rank {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            background-color: #ff6f61;
            color: #fff;
            font-size: 14px;
            margin-right: 10px;
        }

        .topic-list li .rank:nth-child(1) {
            background-color: #ff6f61;
        }

        .topic-list li .rank:nth-child(2) {
            background-color: #ff9f43;
        }

        .topic-list li .rank:nth-child(3) {
            background-color: #ffcc33;
        }

        .topic-list li .rank:nth-child(n+4) {
            background-color: #ddd;
        }

        .topic-list li .title {
            flex-grow: 1;
        }

        .topic-list li .badge {
            background-color: #ff6f61;
            color: #fff;
            padding: 2px 5px;
            border-radius: 3px;
            font-size: 12px;
            margin-left: 10px;
        }

        .topic-list li .badge.hot {
            background-color: #ff6f61;
        }

        .topic-list li .badge.new {
            background-color: #ffcc33;
        }

        .topic-list li .count {
            color: #999;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="time">
            <h6>选择时间范围</h6>
            <input type="date" id="start_time" class="button0">
            <input type="date" id="end_time" class="button0">
            <button onclick="startCrawler()" class="button0">确定</button>
        </div>

        <div class="guidebar">
            <div>
                <button onclick="homepage()" class="button">首页</button>
                <button onclick="sentimentpage()" class="button">情感分析可视化</button>
                <button onclick="weibopage()" class="button">微博可视化</button>
                <button onclick="Kmeanspage()" class="button">微博KMeans聚类分析</button>
            </div>
            <div>
                <button onclick="exist()" class="button">退出登录</button>
                <button onclick="location.reload()" class="button">刷新</button>
            </div>
        </div>

        <div id="app">
            <div class="homecontent">
                <div class="display">
                    <div class="titlename">热点话题趋势图</div>
                    <div class="image-container">
                        <img id="homeimage_1" alt="加载中" />
                    </div>
                </div>

                <div class="displayf">
                    <div class="halfdisplay">
                        <div class="titlename">热门话题榜单</div>
                        <ul class="topic-list">
                            <li v-for="(topic, index) in topics" :key="index">
                                <div class="rank">{{ index + 1 }}</div>
                                <div class="title">{{ topic.title }}</div>
                                <div class="badge" :class="topic.badge">{{ topic.badgeText }}</div>
                                <div class="count">{{ topic.count }}</div>
                            </li>
                        </ul>
                    </div>
                    <div class="halfdisplay">
                        <div class="titlename">热点词云图</div>
                        <div class="image-container">
                            <img id="homeimage_3" alt="加载中" />
                        </div>
                    </div>
                </div>

                <div class="display">
                    <div class="titlename">文章点赞分析</div>
                    <div class="image-container">
                        <img id="homeimage_4" alt="加载中" />
                    </div>
                </div>

                <div class="display" >
                    <div class="titlename" >热点话题预测</div>
                    <div class="image-container">
                      <img src="https://test2022211.oss-cn-beijing.aliyuncs.com/%E5%89%8D%E5%8D%81%E4%B8%AA%E8%AF%9D%E9%A2%98%E7%9A%84%E9%A2%84%E6%B5%8B.png" alt="加载中" />
                      </div>
                  </div>
                  

            </div>
        </div>
    </div>

    <script>
        function homepage() {
            window.location.href = 'home.html';
        }
        function sentimentpage() {
            window.location.href = 'sentiment.html';
        }
        function weibopage() {
            window.location.href = 'weibo.html';
        }
        function Kmeanspage() {
            window.location.href = 'Kmeans.html';
        }
        function exist() {
            window.location.href = 'login.html';
        }

        function startCrawler(){
            alert('哈哈，大傻春，被骗了吧。');
        }

        const app = Vue.createApp({
            data() {
                return {
                    homeimage_1: '',
                    homeimage_3: '',
                    homeimage_4: '',
                    topics: [
                        { title: '徐艺洋 老板就能上我卫生间吗', count: 3431841, badge: 'hot', badgeText: '热' },
                        { title: '本月你的工资或有多项调整', count: 979459, badge: 'new', badgeText: '新' },
                        { title: '60秒带你环游哈萨克斯坦', count: 608882, badge: '', badgeText: '' },
                        { title: '外国男子强奸土耳其5岁女童引发骚乱', count: 581547, badge: '', badgeText: '' },
                        { title: '泰国部长亲自接机中国娃圈女明星', count: 440985, badge: '', badgeText: '' },
                        { title: '歌手 隆里电丝', count: 311792, badge: '', badgeText: '' },
                        { title: '4名渔民饮用漂流瓶中液体后身亡', count: 306829, badge: 'new', badgeText: '新' },
                        { title: '优酷今天官宣了好多剧', count: 303197, badge: '', badgeText: '' }
                    ]
                };
            },
            mounted() {
                this.getNextPicture('hottopic_time');
                this.getNextPicture('like_statistic');
                this.getNextPicture('cloud');
                this.fetchTopics();
            },
            methods: {
                getNextPicture(directory) {
                    axios.get(`http://10.21.249.41:8000/pictures/list/${directory}/`)
                        .then(response => {
                            const imageUrl = 'http://10.21.249.41:8000' + response.data.url;
                            if (directory === 'hottopic_time') {
                                document.getElementById('homeimage_1').src = imageUrl;
                            } else if (directory === 'cloud') {
                                document.getElementById('homeimage_3').src = imageUrl;
                            } else if (directory === 'like_statistic') {
                                document.getElementById('homeimage_4').src = imageUrl;
                            }
                        })
                        .catch(error => {
                            console.error('获取图片错误:', error);
                        });
                },
                fetchTopics() {
                    axios.get('http://10.21.249.41:8000/tables/title')
                        .then(response => {
                            const newTitles = response.data.map(topic => topic.title);
                            this.topics.forEach((topic, index) => {
                                if (newTitles[index]) {
                                    topic.title = newTitles[index];
                                }
                            });
                        })
                        .catch(error => {
                            console.error('获取话题数据错误:', error);
                        });
                }
            }
        });

        app.mount('#app');
    </script>
</body>
</html>
